<!--
 * @Author: LiuYan
 * @Date: 2022-12-17 13:38:50
 * @LastEditors: GuoShuning
 * @LastEditTime: 2022-12-23 15:42:43
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./common/css/coommon.css" />
  <title>Document</title>
  <style>
    .body {
      padding: 0 !important;
      overflow: hidden;
    }

    .body .table-body {
      height: 352px !important;
      overflow-y: auto;
    }
  </style>
</head>

<body>
  <div class="ghcj2" id="app">
    <div class="body">
      <div class="tab-group">
        <div class="tab_button">
          <button class="button_primary_plain" @click="purchaseContract">采购合同</button>
          <button class="button_primary">其他凭证</button>
        </div>
        <button class="button_warning " id="addCheckRecord">
          <img src="./common/img/ghcj2/contract.png" style="margin-right: 3px;" />新增合同
        </button>
      </div>
      <div class="table">
        <div class="table-header">
          <div class="tr">
            <div class="td center" style="width: 10%">合同编号</div>
            <div class="td center" style="width: 10%">合同名称</div>
            <div class="td center" style="width: 10%">合同类型</div>
            <div class="td center" style="width: 10%">合同金额</div>
            <div class="td center" style="width: 10%">最近付款时间</div>
            <div class="td center" style="width: 10%">创建人</div>
            <div class="td center" style="width: 10%">创建时间</div>
            <div class="td center" style="width: 10%">收付款进度</div>
            <div class="td center" style="width: 15%">操作</div>
          </div>
        </div>
        <div class="table-body">
          <div class="tr" v-for="item in list">
            <div class="td center" style="width: 10%">{{item.value}}</div>
            <div class="td center" style="width: 10%">{{item.value}}</div>
            <div class="td center" style="width: 10%">{{item.value}}</div>
            <div class="td center" style="width: 10%">{{item.value}}</div>
            <div class="td center" style="width: 10%">{{item.value}}</div>
            <div class="td center" style="width: 10%">{{item.value}}</div>
            <div class="td center" style="width: 10%">{{item.value}}</div>
            <div class="td center" style="width: 10%">{{item.value}}</div>
            <div class="td center" style="width: 15%">
              <button class="button_primary_text" @click="handle(item)">
                编辑
              </button>
              &ensp;
              <button class="button_error_text">删除</button>
            </div>
          </div>
        </div>
      </div>
      <div class="pagination">
        <span>共 {{total}} 条</span>
        <ul>
          <li @click="shang"><i class="bi bi-chevron-left"></i></li>
          <li v-show="start > 0" @click="()=>{
                if(start > 0){
                  params.page = start;
                  end-=3
                  start-=3
                }
              }">
            ...
          </li>
          <li @click="onCurrentPage(item)" v-for="item in totalPage" v-show="item < end && item > start"
            :class="[item == params.page ? 'active' :'']">
            {{item}}
          </li>
          <li v-show="end <= totalPage" @click="()=>{
                if(end <= totalPage){
                params.page = end;
                end+=3
                start+=3
                }
              }">
            ...
          </li>
          <li @click="next"><i class="bi bi-chevron-right"></i></li>
        </ul>
      </div>
    </div>
    <!-- 添加验收记录 -->
    <div id="addDayReportBox">
      <div class="supplierViolationEdit_dialog">
        <div class="input-group">
          <label>选择日期</label>
          <input placeholder="输入关键字" />
        </div>
        <div class="input-group">
          <label>&#12288;记录人</label>
          <input placeholder="输入关键字" />
        </div>
        <div class="textarea-group">
          <label>违规描述</label>
          <textarea rows="4" placeholder="请输入..."></textarea>
        </div>
        <div class="select-group" style="margin: 1.8519vh 0;">
          <label>验收结果</label>
          <div class="options">
            <input placeholder="输入关键字" />
            <ul>
              <li>输入关键字</li>
              <li>输入关键字</li>
              <li>输入关键字</li>
              <li>输入关键字</li>
            </ul>
          </div>
        </div>
        <div class="textarea-group">
          <label>&#12288;&#12288;备注</label>
          <textarea rows="4" placeholder="请输入..."></textarea>
        </div>
        <div class="upload-group">
          <label>上传附件</label>
          <div class="upload_button">
            <div class="upload_out">
              <img src="./common/img/upload_blue.png" alt="">上传文件
              <input type="file">
            </div>
            <div class="upload_tip">支持扩展名：.rar .zip .doc .docx .pdf .jpg...</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="./common/js/vue.js"></script>
<script type="module">
  import DiaLog from "./common/js/diaLog.js";
  import { childMessage } from "./common/js/event.js";
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        total: 0,
        totalPage: 0,
        start: 0,
        end: 4,
        list: [],
        params: {
          page: 1,
          limit: 10,
        },
      };
    },
    //页面初始化加载
    mounted() {
      console.log("页面初始化加载");
      this.get();
    },
    //所有函数都写在这里
    methods: {
      // 采购合同
      purchaseContract() {
        childMessage({
          src: "./项目详情（合同-采购合同）.html",
          type: "page",
        });
      },
      shang() {
        if (this.params.page > 1) this.params.page--;
        if (this.params.page < this.start + 1) {
          this.end -= 3;
          this.start -= 3;
        }
        this.get();
      },
      next() {
        if (this.params.page < this.totalPage) this.params.page++;
        if (this.params.page > this.end - 1) {
          this.end += 3;
          this.start += 3;
        }
        this.get();
      },
      onCurrentPage(page) {
        this.params.page = page;
      },
      //接口
      get() {
        // ajax 请求
        // $.ajax()
        this.totalPage = 10; // 总页数
        this.total = 100; //总条数
        this.list = [
          {
            value: "吴恒",
          },
        ];
      },
    },
  }).mount("#app");

  let dialog = new DiaLog({
    title: "添加验收记录",
    width: "500px",
    el: "#addDayReportBox",
    cancelText: "取消",
    confirmText: "保存",
    zIndex: 100,
    cancel: () => {
      console.log("取消");
      dialog.hide();
    },
    confirm: (document) => {
      console.log("保存");
      dialog.hide();
    },
  });
  addCheckRecord.addEventListener("click", () => {
    dialog.show();
  });
</script>
<script type="module">
  import Tabs from "../common/js/tabs.js";
  new Tabs({
    tabsEl: "#tabs",
    tabsItemEl: ".tab-item",
    index: 0,
    watch: ({ item, active, index, all, left }) => {
      all.forEach((item) => {
        item.style.color = "#4e5969";
      });
      all[index].style.color = "#3E7BFA";
      active.style.width = "42px";
      const { height, width } = active.getBoundingClientRect();
      active.style.left = left + (item.width - width) / 2 + "px";
      active.style.top = item.height - height + "px";
    },
  });
</script>

</html>